<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="12">
                <el-card style="height: 85vh;">
                    <div slot="header" class="clearfix">
                        <span>图表编辑(myChart)-</span><a href="https://www.isqqw.com/" target="_blank" style="color: #E6A23C;">图表库</a>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="loadData"
                            icon="el-icon-video-play">运行</el-button>
                        <el-button style="float: right; padding: 3px 0;margin-right: 20px;" type="text" @click="submitForm"
                            icon="el-icon-edit" v-if="isSaveAuth">保存</el-button>
                    </div>
                    <ace @input="aceInput" ref="ace" v-model="form.echartData" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="height: 85vh;" ref="imageTofile">
                    <div slot="header" class="clearfix">
                        <span>图表展示</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="htmlToImage('下载')"
                            icon="el-icon-download">下载</el-button>
                    </div>
                    <div ref="echart" style="height:76vh;width:100%;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { listBEchartType, getBEchartType, delBEchartType, addBEchartType, updateBEchartType ,saveEchartImage} from "@/api/ghxx/bEchartType";
import { toPng } from 'html-to-image'
export default {
    name: "EchatDetail",
    data() {
        return {
            // 表单参数
            form: {
                echartData: ''
            },
            echart: null,
            isSaveAuth:false
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        htmlToImage(type) {
            toPng(this.$refs.echart)
            .then(dataUrl => {
                if(type=='保存'){
                    this.form.base64 =dataUrl;
                    saveEchartImage(this.form);
                }else{
                    this.downloadImage(dataUrl)
                }               
            })
            .catch(error => {
                console.error('oops, something went wrong!', error)
            })
        },
        //下载图片
        downloadImage(url) {
            // 如果是在网页中可以直接创建一个 a 标签直接下载 
            let a = document.createElement('a')
            a.href = url
            a.download = this.form.echartName
            a.click()
        },
        loadData() {
            if (this.echart) {
                this.echart.dispose();
            }
            let funStr = this.getFun(this.form.echartData);
            let fun = eval("(" + funStr + ")");
            let view = this.$refs.echart;
            this.echart = this.echarts.init(view);
            let option = fun(this.echarts)
            this.echart.setOption(option);
        },
        //ace编辑器
        aceInput(data) {
            //console.log('ace编辑器',data);
            this.form.echartData = data;
        },
        getDetail() {
            getBEchartType(this.$route.query.id).then(response => {
                this.form = response.data;
                if (this.form.deptIdStrs.indexOf(this.$store.getters.deptId) > -1) {
                    this.isSaveAuth=true;
                } else {
                    this.isSaveAuth=false;
                }
                setTimeout(() => {
                    this.$refs.ace.setValue(this.form.echartData)
                    this.$refs.ace.setMaxLines(36)
                    this.loadData(); 
                }, 500);             
            });
        },

        /** 提交按钮 */
        submitForm() {
            updateBEchartType(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.htmlToImage('保存');
            });
        },
        getFun(optionStr) {
            let funStr = "function (myChart) {\n" +
                optionStr + "\n" +
                "    return option;\n" +
                "}";
            return funStr;
        },
    }
}
</script>
  